<template>
  <ContainerGroup>
    <!-- 查询取悦开始 -->
    <Container style="margin-bottom: 12px">
      <div class="query-form">
        <FilterForm
          :elements="queryForm"
          @reset="reset"
          @submit="handleSearch"
        />
      </div>
    </Container>
    <!-- 查询区域结束 -->

    <!-- 表格主体区域开始 -->
    <Container
      class="earning-project"
      style="height: calc(100% - 67px); overflow-y: auto"
    >
      <!-- 按钮区域 -->
      <div class="button-bar">
        <Button icon="add" @click="addDetail">新增</Button>
        <!-- <Button type="info">继承</Button> -->
      </div>

      <!-- 表格区域 -->
      <div class="table-box" style="padding: 12px; padding-top: 0">
        <el-table
          :data="projectData"
          border
          :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8' }"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60"
          />
          <el-table-column prop="edCode" label="编码" width="160" />
          <el-table-column prop="edName" label="名称" />
          <el-table-column
            prop="edExtraFirstCode"
            label="收入大类编号"
            width="160"
          />
          <el-table-column
            prop="edExtraFirstDescription"
            label="收入大类名称"
          />
          <el-table-column align="center" label="是否启用" width="240">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.rowStatus"
                active-color="#FFA712"
                :active-value="'0'"
                :inactive-value="'1'"
                @change="switchUse(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <!-- <span class="edit-detail" @click="editDetail(scope.row)">修改</span> -->
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <i
                  class="el-icon-edit-outline"
                  style="
                    padding-top: 4px;
                    font-size: 20px;
                    color: #207efa;
                    cursor: pointer;
                  "
                  @click="editDetail(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
                style="margin-left: 10px"
              >
                <i
                  class="el-icon-delete"
                  style="
                    padding-top: 4px;
                    font-size: 20px;
                    color: #207efa;
                    cursor: pointer;
                  "
                  @click="deleteDetail(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <Pagination
        :total="pageAttr.total"
        :page="pageAttr.currentPage"
        :page-size="pageAttr.pageSize"
        @pagation="pagationChange"
      />
      <Drawer
        :visible="showEidtVlidate"
        :title="drawerTitle"
        width="30%"
        :footer-btns="[
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel'
          },
          {
            text: '确定',
            type: 'primary',
            trigger: 'okBtn'
          }
        ]"
        @cancel="drawClose"
        @okBtn="saveEidtRule"
      >
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          style="margin-top: 48px"
        >
          <el-form-item style="margin-top: 20px" label="编码：">
            <el-input
              v-model="form.edCode"
              :disabled="deptDisabled"
              clearable
              style="width: auto"
            />
          </el-form-item>
          <el-form-item style="margin-top: 20px" label="名称：">
            <el-input v-model="form.edName" clearable style="width: auto" />
          </el-form-item>
          <el-form-item style="margin-top: 20px" label="收入大类名称：">
            <el-select v-model="form.value" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </Drawer>
    </Container>
    <!-- 表格主体区域结束 -->
  </ContainerGroup>
</template>

<script>
import {
  getEnumDetailSource,
  addEnumDetail,
  modifyEnumDetail,
  getLikeEnumDetailSource,
  getEnumDetailSourcePage
} from '../../../utils/apis/accountingUnit/factor'
import { BasicParams } from '../../../utils/basicParams'
import { batchDeleteEnumDetail } from '../../../utils/apis/basic'
export default {
  name: 'EarningProject', // 收入项目
  components: {},
  data() {
    return {
      // 分页参数
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      options1: [
        {
          value: '01',
          label: '西药'
        },
        {
          value: '02',
          label: '中成药'
        },
        {
          value: '03',
          label: '草药'
        },
        {
          value: '04',
          label: '化验'
        },
        {
          value: '05',
          label: '检查'
        },
        {
          value: '06',
          label: '处置'
        },
        {
          value: '07',
          label: '卫材'
        },
        {
          value: '08',
          label: '手术'
        },
        {
          value: '09',
          label: '护理'
        },
        {
          value: '10',
          label: '用血'
        },
        {
          value: '11',
          label: '营养'
        },
        {
          value: '12',
          label: '治疗'
        },
        {
          value: 'XX',
          label: '其他'
        }
      ],

      showEidtVlidate: false,
      deptDisabled: false,
      drawerTitle: '',
      height: 'fill',
      form: {
        id: '',
        edCode: '',
        edName: '',
        value: ''
      },
      // 查询参数
      queryForm: [
        {
          label: '名称',
          key: 'name',
          type: 'Select',
          clearable: true,
          value: '',
          filterable: true,
          remote: true,
          remoteMethod: this.getFellData,
          itemLabel: 'edName',
          itemValue: 'edCode',
          options: []
        },
        // {
        //   label: "名称",
        //   key: "name", // 查询参数的key
        //   type: "Input",
        // },
        {
          key: 'rowStatus',
          type: 'Select',
          label: '启用状态',
          value: '',
          width: 210,
          options: [
            {
              label: '全部',
              value: ''
            },
            {
              label: '已启用',
              value: '0'
            },
            {
              label: '未启用',
              value: '1'
            }
          ],
          filterable: true,
          clearable: true
        }
      ],
      isEdit: false,
      // 表格数据
      projectData: [],
      newParamList: {}
    }
  },
  created() {},
  mounted() {
    // this.getData();
  },
  methods: {
    handleSearch(data) {
      this.pageAttr.currentPage = 1
      this.newParamList = data
      this.getData(data)
    },
    // 删除
    deleteDetail(row) {
      this.$confirm({
        content: '是否确认删除？',
        title: '温馨提示',
        okFn: (res) => {
          const ids = [row.edId]
          batchDeleteEnumDetail(ids).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 请求成功后刷新数据
              this.getData()
            }
          })
        }
      })
    },
    switchUse(row) {
      const basicParams = new BasicParams()
      basicParams.edId = row.edId
      basicParams.rowStatus = row.rowStatus
      basicParams.edParentCode = 'BD_IncomeItem'
      modifyEnumDetail(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.getData()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取下拉框
    getFellData(val) {
      const basicParams = new BasicParams()
      basicParams.edParentCode = 'BD_IncomeItem'
      basicParams.edName = val
      getLikeEnumDetailSource(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.queryForm[0].options = res.data.data
        }
      })
    },
    // 新增 / 编辑
    saveEidtRule() {
      const selectedOption = this.options1.find(
        (option) => option.value === this.form.value
      )
      const basicParams = new BasicParams()
      basicParams.edExtraFirstCode = ''
      basicParams.edExtraFirstCode = this.form.value
      basicParams.edExtraFirstDescription = selectedOption.label
      basicParams.edCode = this.form.edCode
      basicParams.edName = this.form.edName
      basicParams.edParentCode = 'BD_IncomeItem'
      basicParams.edExtraSecondCode = []
      if (this.isEdit) {
        basicParams.edId = this.form.id
        basicParams.edExtraSecondCode = ''
        modifyEnumDetail(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getData()
            this.showEidtVlidate = false
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        basicParams.edId = ''
        addEnumDetail(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
            this.getData()
            this.showEidtVlidate = false
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    drawClose() {
      this.showEidtVlidate = false
    },
    // 获取页面数据
    getData(val) {
      const basicParams = new BasicParams()
      if (val) {
        // basicParams.edName = val.name ? val.name : "";
        basicParams.edCode = val.name ? val.name : ''
        basicParams.rowStatus = val.rowStatus || ''
      } else {
        basicParams.edName = ''
        basicParams.edCode = ''
      }
      basicParams.edExtraFirstCode = ''
      basicParams.edExtraFirstDescription = ''
      basicParams.edName = ''
      basicParams.edId = 0
      basicParams.edParentCode = 'BD_IncomeItem'
      basicParams.pageIndex = this.pageAttr.currentPage
      basicParams.pageSize = this.pageAttr.pageSize
      getEnumDetailSourcePage(basicParams).then((res) => {
        if (res.data.code === 200) {
          this.projectData = res.data.data.list
          this.pageAttr.total = res.data.data.total || 0
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 分页
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page
      this.pageAttr.pageSize = payload.pageSize
      this.getData(this.newParamList)
    },
    // 重置
    reset() {},
    // 新增
    addDetail() {
      this.isEdit = false
      this.drawerTitle = '新增收入项目'
      this.showEidtVlidate = true
      this.showDetail()
    },
    // 编辑
    editDetail(row) {
      this.isEdit = true
      this.drawerTitle = '修改收入项目'
      this.showEidtVlidate = true
      this.showDetail(row)
    },
    showDetail(row) {
      const basicParams = new BasicParams()
      basicParams.edParentCode = 'BD_IncomeItem'
      if (this.isEdit) {
        this.deptDisabled = true
        basicParams.edCode = row.edCode
        basicParams.edExtraFirstCode = ''
        getEnumDetailSource(basicParams).then((res) => {
          if (res.data.code === 200) {
            this.form.edCode = res.data.data[0].edCode
            this.form.edName = res.data.data[0].edName
            this.form.id = res.data.data[0].edId
            this.form.value = res.data.data[0].edExtraFirstDescription
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.deptDisabled = false
        this.form.edCode = ''
        this.form.edName = ''
      }
      this.showEidtVlidate = true
    }
  }
}
</script>

<style lang="less" scoped>
.earning-project {
  padding: 0 !important;
}
.title {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #ccc;
}
.query-form {
  Button {
    margin-left: 12px;
  }
}
.el-form-item {
  margin-bottom: 0;
}
.button-bar {
  box-sizing: border-box;
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 12px;
  Button:first-of-type {
    margin-right: 12px;
  }
}
.edit-detail {
  color: #4073ff;
  cursor: pointer;
}
.table-box {
  height: calc(100% - 120px);
  overflow-y: auto;
}
</style>
